<template>
	<view>
		<view class="more" v-for="(item,index) in listData">
			<image :src="$wanlshop.oss(item.avatar, 125, 125)"
				mode="aspectFill" class="shopimg"></image>
			<view class="box">
				<view class="shopname" @tap="goShop(item.id)">{{ item.shopname }}</view>
				<view class="divide" @tap="goShop(item.id)">
					<view class="wlIcon-shoucangxuanzhong selectColor" v-for="(item,index) in item.score_service"></view>
					<view class="wlIcon-shoucangxuanzhong mocolor" v-for="(item,index) in 5-item.score_service"></view>
					<view class="num">{{ item.score_service }}分</view>
				</view>
				<view class="detail" @tap="goShop(item.id)">
					<view class="address">{{ item.address }}</view>
					<view class="km">{{ item.distance_km }}km</view>
				</view>
				<view class="list">
					<view class="three" v-for="(goods,goodsIndex) in item.goods" @tap="goGoods(goods.id)">
						<image
							:src="$wanlshop.oss(goods.image, 125, 125)"
							mode="aspectFill" 
							:class="goods.is_chufang == 1 ? 'chufangyao' : ''"
						/>
						<view class="goodsname">{{goods.title}}</view>
						<view class="money">￥{{ goods.price }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[]
			}
		},
		onLoad(option) {
			let data = JSON.parse(option.data)
			console.log(data.title,'8888888');
			this.getData(data.category_id,data.title)
		},
		methods: {
			goGoods(goods_id){
				this.$wanlshop.to(`/pages/product/goods?id=`+goods_id);
			},
			goShop(shop_id){
				this.$wanlshop.to(`/pages/shop/index?id=`+shop_id);
			},
			getData(category_id,title){
				uni.request({
					url: '/wanlshop/shop/shopList',
					method: 'GET',
					data: {
						category_id:category_id,
						title:title
					},
					success: res => {
						this.listData = res.data
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.more {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		padding: 30rpx 0;
		margin-left: 30rpx;
		margin-top: 30rpx;

		.shopimg {
			width: 84rpx;
			height: 84rpx;
			border-radius: 16rpx;
			margin-left: 30rpx;
		}

		.box {
			width: 526rpx;
			margin-left: 20rpx;

			.shopname {
				width: 100%;
				font-size: 33rpx;
				color: #3D3D3D;
			}

			.divide {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 6rpx;

				.selectColor {
					color: #F4DD15;
					margin-right: 4rpx;
				}

				.mocolor {
					color: #eaeaea;
					margin-right: 4rpx;
				}

				.num {
					font-size: 26rpx;
					color: #999999;
					margin-left: 12rpx;
				}
			}

			.detail {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;

				.address {
					font-size: 26rpx;
					color: #999999;
				}

				.km {
					font-size: 26rpx;
					color: #999999;
				}
			}

			.list {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.three {
					width: 166rpx;

					image {
						width: 166rpx;
						height: 166rpx;
						border-radius: 16rpx;
					}

					.goodsname {
						font-size: 26rpx;
						color: #333333;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.money {
						font-size: 30rpx;
						color: #FF4800;
						font-weight: bold;
					}
				}
			}

		}
	}
</style>